<template>
  <div class="px-5 py-4 bg-white">
    <el-row :gutter="0">
      <el-col :span="24" :xs="24">
        <!-- 标题 -->
        <HeadTitle text="患者列表查询"/>
      </el-col>
      <el-col :span="24" :xs="24">
        <!-- 搜索 -->
        <el-form :model="queryParams" ref="queryRef" :inline="true">
          <el-form-item label="" prop="keyWord">
            <el-input v-model="queryParams.keyWord" placeholder="证件号/名字" clearable style="width: 240px"/>
          </el-form-item>
          <el-form-item label="科室" prop="deptId">
            <el-select v-model="queryParams.deptId" placeholder="全部" clearable style="width: 240px"
                       @change="deptChange">
              <el-option v-for="item in deptOptions" :key="item.id" :label="item.label" :value="item.id"/>
            </el-select>
          </el-form-item>
          <el-form-item label="开单医生" prop="doctorId">
            <el-select v-model="queryParams.doctorId" placeholder="全部" clearable style="width: 240px"
                       @change="getList" :disabled="!queryParams.deptId">
              <el-option v-for="item in doctorOptins" :key="item.userId" :label="item.fullName" :value="item.userId"/>
            </el-select>
          </el-form-item>
          <el-form-item label="就诊时间" style="width: 308px">
            <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
                            start-placeholder="开始日期" end-placeholder="结束日期"/>
          </el-form-item>
          <el-form-item label="就诊状态" prop="visitStatus">
            <el-select v-model="queryParams.visitStatus" placeholder="全部" clearable style="width: 240px">
              <el-option label="就诊中" value="0"/>
              <el-option label="就诊结束" value="1"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="getList">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button icon="Refresh" @click="resetQuery(queryRef)">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <!-- 表格 -->
    <el-row :gutter="0" class="mt-4">
      <el-col :span="24">
        <Table :column="tableColumn" :table-data="userList" :option="option" @current-change="handleCurrentChange"
               @size-change="handleSizeChange">
          <template #status="{ row }">
            <span v-if="row.visitStatus == '0'" style="color: #00a991">就诊中</span>
            <span v-else style="color: #86909c">已结束</span>
          </template>
          <template #doctorInfo="{ row }">
            {{row.fullName + "（" + row.userName + "）"}}
          </template>
          <template #btn="{ row }">
            <el-button type="primary" round :icon="InfoFilled" size="small">查看</el-button>
          </template>
        </Table>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import {reactive, ref, toRefs} from 'vue'
import {allListReg, doctorTree} from '@/api/patientREG'
import {getDeptTree} from "@/api/user";
import {InfoFilled} from "@element-plus/icons-vue";

const queryRef = ref()
const dateRange = ref([]) //时间
const deptOptions: any = ref([]) //科室选择
const doctorOptins: any = ref([]) //医生选择

/**列表查询 */
interface QueryType {
  pageNum: number
  pageSize: number
  keyWord?: string //证件号和姓名
  startTime?: string //开始时间
  endTime?: string //结束时间
  visitStatus?: string //就诊状态
  deptId?: number //科室ID
  doctorId?: number //医生ID
}

interface DataType {
  queryParams: QueryType
}

const data = reactive<DataType>({
  queryParams: {
    pageNum: 1,
    pageSize: 10
  },
})

const {queryParams} = toRefs(data)

//表格配置
const tableColumn = [
  {type: 'index', label: '序号', align: 'center', width: '80'},
  {prop: 'patientName', label: '姓名', align: 'center'},
  {prop: 'identityNumber', label: '证件号', align: 'center', width: '180'},
  {prop: 'visitNoStr', label: '就诊号', align: 'center', width: '180'},
  {prop: 'deptName', label: '科室', align: 'center'},
  {prop: 'doctorName', label: '开单医生', align: 'center', slot: 'doctorInfo'},
  {prop: 'rentalDays', label: '疗程天数', align: 'center'},
  {prop: 'visitStatus', label: '就诊状态', align: 'center', slot: 'status'},
  {prop: 'visitTime', label: '就诊时间', align: 'center', showOverflowTooltip: true},
] as Table.Column[]

interface State {
  userList: Array<object>
  option: Table.Option
}

const state = reactive<State>({
  userList: [
    {
      userId: '',
      status: '',
      createTime: ''
    }
  ],
  option: {
    loading: false,
    showPagination: true,
    height: 570,
    paginationConfig: {
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  }
})
const {userList, option} = toRefs(state)

/** 患者列表 */
const getList = () => {
  option.value.loading = true
  if (dateRange.value?.length) {
    queryParams.value.startTime = dateRange.value[0] //开始时间
    queryParams.value.endTime = dateRange.value[1] //结束时间
  } else {
    queryParams.value.startTime = ""
    queryParams.value.endTime = ""
  }
  allListReg(queryParams.value).then((res: any) => {
    userList.value = res.rows
    if (option.value.paginationConfig) {
      option.value.paginationConfig.total = res.total
    }
    option.value.loading = false
  })
}

/** 重置按钮操作 */
const resetQuery = (queryRef: { resetFields: () => void }) => {
  queryRef.resetFields()
  dateRange.value = []
  queryParams.value.startTime = '' //开始时间
  queryParams.value.endTime = '' //结束时间
  getList()
}

/** 分页*/
const handleCurrentChange = (pageNum: number) => {
  if (option.value.paginationConfig) {
    option.value.paginationConfig.currentPage = pageNum
    queryParams.value.pageNum = pageNum
  }
  getList()
}

/** 分页*/
const handleSizeChange = (pageSize: number) => {
  if (option.value.paginationConfig) {
    option.value.paginationConfig.pageSize = pageSize
    queryParams.value.pageSize = pageSize
  }
  getList()
}

/** 科室 */
const DeptTree = () => {
  getDeptTree().then((res: any) => {
    deptOptions.value = res.data
  })
}
/** 科室选择 */
const deptChange = () => {
  queryParams.value.doctorId = undefined
  doctorTree({deptId: queryParams.value.deptId as number}).then((res: any) => {
    doctorOptins.value = res.data
  })
  getList()
}

getList()
DeptTree()
</script>
<style scoped lang="less">
.dialog-footer button:first-child {
  margin-right: 10px;
}

.addEq {
  width: 82px;
  height: 26px;
  line-height: 24px;
  border-radius: 4px;
  background: #e8fff8;
  box-sizing: border-box;
  border: 1px solid #00a991;
  text-align: center;
  color: #00a991;
  cursor: pointer;
}
</style>
<style>
.el-input__wrapper {
  width: 100%;
}

.calBp > .el-dialog__body {
  padding: 10px;
}

.el-input-number.is-without-controls .el-input__wrapper {
  padding: 1px 11px;
}

.el-input-number .el-input__inner {
  text-align: left;
}
</style>
